<template>
  <div class="consppp">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
       <van-cell class="comment-item" v-for="item in list"  :key="item.com_id.toString()">
            <van-image
              slot="icon"
              class="avatar"
              round
              fit="cover"
              :src="item.aut_photo"
            />
            <div slot="title" class="title-wrap">
              <div class="user-name">{{ item.aut_name }}</div>
              <van-button
                class="like-btn"
                icon="good-job-o"
                @click="dianzhans(item)"
              >{{item.like_count}}</van-button>
            </div>

            <div slot="label">
              <p class="comment-content">{{ item.content }}</p>
              <div class="bottom-info">
                <span class="comment-pubdate">{{ item.pubdate | relativeTime }}</span>
                <van-button
                  class="reply-btn"
                  round
                >回复 {{item.reply_count}}</van-button>
              </div>
            </div>
          </van-cell>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <!-- <van-cell-group class="publish-wrap">
      <van-field clearable placeholder="请输入评论内容">
        <van-button slot="button" size="mini" type="info">发布</van-button>
      </van-field>
    </van-cell-group> -->
    <!-- /发布评论 -->
  </div>
</template>

<script>
import { getComments,addCommentLike,deleteCommentLike } from '@/api/user'
export default {
  props: {
    lists :{
      type:[String,Number],
      require:true
    }
  },
  data() {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset:null
    }
  },
  methods: {
    async onLoad() {
      // // 异步更新数据
      const query = {
        type:'a',
        source:this.lists,
        offset:this.offset,
        limit:10
      }
      const yibu = await getComments(query)
      const pinlun = yibu.data.data.results
      this.list.push(...pinlun)
      this.$emit('tiaoshu',yibu.data.data.total_count)
      this.offset = yibu.data.data.last_id               
      if (pinlun.length === 0){
        this.loading = true  
        this.finished = true        
      }          
      this.loading = false
    },
    async dianzhans(item){
      // 已经关注
      if (item.is_liking){
        // 取消关注
        const quxiao = await deleteCommentLike(item.com_id)
        console.log(quxiao)
        if (quxiao.status === 201){
          this.$toast('取消点赞成功')
        }         
      } else {
        // 没有关注
        // 去关注
        const guanzhu = await addCommentLike(item.com_id)
        if (guanzhu.status === 201){
          this.$toast('点赞成功')
        }
        console.log(guanzhu)
      }
      // 去渲染界面      
      item.is_liking = !item.is_liking
      console.log(item.is_liking)
    }
  },
  mounted(){
    this.onLoad()
  }
}
</script>

<style  lang="less">
 .comment-item {
  .avatar {
    width: 72px;
    height: 72px;
    margin-right: 25px;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-name {
      color: #406599;
      font-size: 26px;
    }
  }
  .comment-content {
    font-size: 32px;
    color: #222222;
    word-break: break-all;
    text-align: justify;
  }
  .comment-pubdate {
    font-size: 19px;
    color: #222;
    margin-right: 25px;
  }
  .bottom-info {
    display: flex;
    align-items: center;
  }
  .reply-btn {
    width: 150px;
    height: 48px;
    line-height: 48px;
    font-size: 21px;
    color: #222;
  }
  .like-btn {
    height: 30px;
    padding: 0;
    border: none;
    font-size: 19px;
    line-height: 30px;
    margin-right: 7px;
    .van-icon {
      font-size: 30px;
    }
  }
}
  .consppp{
    .van-cell__title{
      text-align: left;
    }
    .right{
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
</style>
